<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>测试道路路网</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:进阶篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript">
    <!-- frame所需脚本和样式 -->
    <link rel="stylesheet" href="../../script/bootstrap-3.3.5/css/bootstrap.min.css">   
    <link rel="stylesheet" href="../../script/codemirror/codemirror.css">
    <script src="../../script/lib/jquery-1.11.2.min.js"></script>
    <script src="../../script/codemirror/codemirror_merge.js"></script>
    <!-- 加载代码块 -->
	<link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="../../style/graph.css">
    <script src="../js/helper.js"></script>
    <script>
        var pageTitle = "交通路网";
        var pageDesc = "通过一个实际应用案例，采用 AnyGraph 实现对交通路网数据展示功能;";
    </script>

    <script type="module">
        import { Graph, View, Layer, VectorSource, WebMercator, GeoJSONFormat, MathUtil, LayerControl, MousePositionControl, ZoomControl } from "../../src/index.js";

        document.addEventListener('DOMContentLoaded', function () {
            // 初始化graph对象，手动指定视点位置
            let currentCoord = [12684305, 2576317];
            let defaultResolution = 1.2;

            // graph对象
            let graph = new Graph({
                "target": "graphWrapper",
                "originAtLeftTop": false,
                "view": new View({
                    center: currentCoord,              //地图初始中心点
                    resolution: defaultResolution      //地图初始显示密度
                })
            });

            let projection = new WebMercator();
            let path = "../../demo-data/sz_road_part/";
            
            // 图层:道路-路中线
            let layerRoadCenter = new Layer({
                source: new VectorSource({
                    "fileUrl": path + "export_roadcenter.geojson",
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 24,
                name: "道路-路中线",
                style: { "color": "#999900", "lineWidth": 10 },
                minResolution: 1.880,
                visible: true
            });
            graph.addLayer(layerRoadCenter);

            // 图层:道路-路面
            let layerRoadFace = new Layer({
                source: new VectorSource({
                    "fileUrl": path + "export_redge_face.geojson",
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 10,
                name: "道路-路面",
                style: { "color": "rgba(48, 48, 48, 1)", "fillColor": "rgba(48, 48, 48, 1)", "fillStyle": 1, "lineWidth": 0 },
                maxResolution: 1.880,
                visible: true
            });
            graph.addLayer(layerRoadFace);

            // 图层：道路-虚线
            let layerRoadDash = new Layer({
                source: new VectorSource({
                    "fileUrl": path + "export_line_dash.geojson",
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 18,
                name: "道路-虚线",
                style: { "color": "#FFFFFF", "dash": [6, 6, 6, 6], "lineWidth": 1 },
                maxResolution: 0.62,
                visible: true
            });
            graph.addLayer(layerRoadDash);

            // 图层：道路-实线
            let layerRoadLine = new Layer({
                source: new VectorSource({
                    "fileUrl": path + "export_line.geojson",
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 20,
                name: "道路-实线",
                style: { "color": "white", "lineWidth": 1 },
                maxResolution: 0.62,
                visible: true
            });
            graph.addLayer(layerRoadLine);

            // 图层:地面方向箭头指示
            let layerRoadTurn = new Layer({
                source: new VectorSource({
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 40,
                name: "地面方向箭头指示",
                style: {
                    "color": "#DAA520", "size": 16, "centerAsOrigin": true, "dynamicFn": function (obj, objStyle, viewState) {
                        let res = 0.1;
                        let scale = 0.3;
                        if (viewState.resolution > res * Math.pow(2, 5)) {
                            scale = scale * 0.125;
                        } else if (viewState.resolution > res * Math.pow(2, 4)) {
                            scale = scale * 0.25;
                        } else if (viewState.resolution > res * Math.pow(2, 2)) {
                            scale = scale * 0.5;
                        } else if (viewState.resolution > res * Math.pow(2, 1)) {
                            scale = scale * 1;
                        } else if (viewState.resolution > res * Math.pow(2, 0)) {
                            scale = scale * 2;
                        } else if (viewState.resolution > res * 0.4) {
                            scale = scale * 4;
                        } else {
                            scale = scale * 8;
                        }
                        objStyle.scale = scale;
                        return true;
                    }
                },
                maxResolution: 0.4,
                visible: true
            });
            graph.addLayer(layerRoadTurn);

            // 加载地面方向箭头数据
            layerRoadTurn.getSource().loadFile(path + "export_turn.geojson", function (file) {
                let datas = layerRoadTurn.getSource().getData();
                if (datas.length > 0) {
                    // 根据geom的properties修改geom的属性
                    datas.forEach(obj => {
                        let symbol = obj.properties.symbol;
                        let idx = symbol.indexOf("-");
                        let fileName = (idx > 0) ? symbol.substring(0, idx) : symbol;
                        obj.src = path + "images/" + fileName + ".png";
                        obj.rotation = MathUtil.toDegrees(obj.properties.angle);
                        layerRoadTurn.getSource().add2Cache(obj.imgUrl);
                    })
                }
            });

            // 图层:道路名称
            let layerRoadName = new Layer({
                source: new VectorSource({
                    "fileUrl": path + "export_roadcenter.geojson",
                    "projection": projection,
                    "format": new GeoJSONFormat()
                }),
                zIndex: 50,
                name: "道路-道路名称",
                style: {
                    "color": "#FFFFFF00",
                    "lineWidth": -1,
                    "labelStyle": { "font": "20px 黑体", "fillColor": "#FF9900" }, "dynamicFn": function (obj, objStyle, viewState) {
                        let res = 1.88;
                        let font;
                        let fillColor;
                        if (viewState.resolution > res * 2) {
                            font = "14px 黑体";
                            fillColor = "#000000";
                        } else if (viewState.resolution > res) {
                            font = "20px 黑体";
                            fillColor = "#000000";
                        } else if (viewState.resolution > res * 0.5) {
                            font = "24px 黑体";
                            fillColor = "#FF9900";
                        } else if (viewState.resolution > res * 0.1) {
                            font = "28px 黑体";
                            fillColor = "#FF9900";
                        } else {
                            font = "32px 黑体";
                            fillColor = "#FF9900";
                        }
                        objStyle.labelStyle.font = font;
                        objStyle.labelStyle.fillColor = fillColor;
                        return true;
                    }
                },
                visible: true
            });
            graph.addLayer(layerRoadName);

            // 图层控件
            graph.addControl(new LayerControl());
            graph.addControl(new MousePositionControl({ "showRes": false }));
            graph.addControl(new ZoomControl());

            let selectedEntitys = [];
            const HIGH_LIGHT_STYLE1 = { "color": "#FF0000", "fillColor": "#FF0000", "lineWidth": 3 };
            function clearHighlight() {
                for (let k = 0; k < selectedEntitys.length; k++) {
                    selectedEntitys[k].setRenderStyle(null);
                    selectedEntitys[k].setFocus(false);
                }
                selectedEntitys = [];
            }

            function setHighlight() {
                for (let k = 0; k < selectedEntitys.length; k++) {
                    //selectedEntitys[k].setFocus( false );
                    selectedEntitys[k].setRenderStyle(HIGH_LIGHT_STYLE1);
                    selectedEntitys[k].setFocus(true);
                }
            }

            // 绑定鼠标事件 
            graph.getRenderObject().on("click", function (args) {
                // 清除上一次的高亮节点
                clearHighlight();

                // 查询当前位置的GeomList
                let coord = graph.getCoordinateFromPixel([args.x, args.y]);
                let selecteds = graph.queryGeomList(coord);

                // 显示选中节点信息
                for (let i = 0, ii = selecteds.length; i < ii; i++) {
                    let entity = selecteds[i];
                    if (entity.getType() == 'Text') {
                        continue;
                    }
                    if (entity.contain([args.x, args.y], false)) {
                        // 显示信息                            
                        console.info(entity);
                        selectedEntitys.push(entity);
                    }
                }
                setHighlight();
                graph.render();
            });
        });

    </script>
</head>

<body oncontextmenu="return false;">
    <div id="wrap">
        <div id="graphWrapper" data-type="graph" style="width:100%; height:500px; border:solid 1px #CCC;"></div>
    </div>
</body>

</html>